<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <el-menu active-text-color="#ffd04b" background-color="black" class="el-menu-vertical-demo" default-active="2"
          text-color="#ffffff" @select="toPage">
          <div style="display: flex;align-items: center;">
            <i class="iconfont icon-hotel1"
              style="background-color: black;font-size: 40px;color:white;margin: 30px;"></i>
            <h3 style="color: white;">中途大酒店</h3>
          </div>
          <el-menu-item index="/index">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>后台首页</span>
          </el-menu-item>
          <el-menu-item index="/show">
            <el-icon>
              <Promotion />
            </el-icon>
            <span>查看房间信息</span>
          </el-menu-item>
          <el-menu-item index="/room">
            <el-icon>
              <Tools />
            </el-icon>
            <span>客房管理</span>
          </el-menu-item>
          <el-menu-item index="/employee">
            <el-icon>
              <User />
            </el-icon>
            <span>员工管理</span>
          </el-menu-item>
          <el-menu-item index="/dept">
            <el-icon>
              <Menu />
            </el-icon>
            <span>部门管理</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <el-icon>
              <Avatar />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <el-icon>
              <List />
            </el-icon>
            <span>订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>

        <el-header class="header" style="display: flex;align-items: center; background-color: #E5EAF3;">
          <h2 style="color: #333;">酒店后台管理</h2>
          <!-- <el-button link @click="logout" class="backPlay">退出</el-button> -->
          <el-menu background-color="#E5EAF3" text-color="#fffff" mode="horizontal" active-text-color="#fffff"
            :ellipsis="false" @select="toPage">
            <div style="font-size: 45px;">
              <el-avatar :src="imageUrl" />
            </div>
            <el-sub-menu>
              <template #title>{{ information.iname }}</template>
              <el-menu-item index="/information">个人信息</el-menu-item>
              <el-menu-item @click="logout">退出</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import router from '@/router'
import { RouterLink, RouterView } from 'vue-router'

import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
import adminApi from '@/api/admin';
// import TheWelcome from '../components/TheWelcome.vue'
import { useTokenStore } from '@/stores/token';
const tokenStore=useTokenStore();
const information = ref('');
const imageUrl = ref('')
function getLoginInfo(){
   adminApi.getLoginInfo()
        .then(resp => {
          information.value=resp.data;
          imageUrl.value="http://localhost:8080/upload/" + resp.data.iavatar
        })
}

//编程式导航
function toPage(indexPath) {
  router.push(indexPath);
}

function logout() {
  ElMessageBox.confirm(
    '确认退出该账户?',
    '退出',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage.success({
        message: `退出成功`,
        duration: 1000,
        onClose: () => {
          tokenStore.$reset();
          router.push('/login')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
        duration: 1000
      })
    })

}

getLoginInfo();

</script>
<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.backPlay {
  &:hover {
    color: orange;
  }
}
</style>